<template>
  <el-dialog
    title="详情"
    v-model="visible"
    :close-on-click-modal="false"
    draggable
    width="70%"
  >
    <div v-loading="loading">
      <div class="baseInfo">
        <div>
          <span class="baseTitle"> 林地宗地号：</span
          ><span class="baseContent">{{ form.forestLandParcelNumber }}</span>
        </div>
        <div>
          <span class="baseTitle"> 林权证号：</span
          ><span class="baseContent">{{ form.forestNumber }}</span>
        </div>
        <div>
          <span class="baseTitle"> 不动产单元号：</span
          ><span class="baseContent">{{ form.realEstateUnitNumber }}</span>
        </div>
        <div>
          <span class="baseTitle"> 面积（亩）：</span
          ><span class="baseContent">{{ form.squareMeasure }}</span>
        </div>
        <div>
          <span class="baseTitle"> 坐落：</span
          ><span class="baseContent">{{
            form.locatedInTheCounty +
            form.sittingVillagetownstreet +
            form.locatedVillage +
            form.locationGroup
          }}</span>
        </div>
        <div>
          <span class="baseTitle"> 林种：</span
          ><span
            class="baseContent"
            v-for="(item, index) in forest_category"
            :key="index"
            >{{ item.value == form.forestCategory ? item.label : "" }}</span
          >
        </div>
      </div>
      <el-divider />
      <div class="baseInfo1">
        <div>
          <h3 style="font-weight: bold">1、林地所有权</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 权利人：</span
              ><span class="baseContent">{{ form.forestHolder }}</span>
            </div>
            <div>
              <span class="baseTitle"> 证件号码：</span
              ><span class="baseContent">{{ form.forestHolders }}</span>
            </div>
            <div>
              <span class="baseTitle"> 经办机构：</span
              ><span class="baseContent">{{ form.forestAgency }}</span>
            </div>
            <div v-if="false">
              <span class="baseTitle"> 经办材料：</span
              ><span class="baseContent">{{ form.materialsOwnership }}</span>
            </div>
          </div>
        </div>
        <div>
          <h3 style="font-weight: bold">2、林地使用权</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 权利人：</span
              ><span class="baseContent">{{ form.rightMountain }}</span>
            </div>
            <div>
              <span class="baseTitle"> 证件号码：</span
              ><span class="baseContent">{{ form.useRightHolderPrivateMountain }}</span>
            </div>
            <div>
              <span class="baseTitle"> 使用权起日：</span
              ><span class="baseContent">{{ form.startingDate }}</span>
            </div>
            <div>
              <span class="baseTitle"> 使用权止日：</span
              ><span class="baseContent">{{ form.endDate }}</span>
            </div>
            <div>
              <span class="baseTitle"> 经办机构：</span
              ><span class="baseContent">{{ form.forestUseAgency }}</span>
            </div>
            <div v-if="false">
              <span class="baseTitle"> 经办材料：</span
              ><span class="baseContent">{{ form.materialsHandlingRights }}</span>
            </div>
          </div>
        </div>
        <div>
          <h3 style="font-weight: bold">3、林地承包经营权</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 权利人：</span
              ><span class="baseContent">{{ form.rightRights }}</span>
            </div>
            <div>
              <span class="baseTitle"> 身份证号码：</span
              ><span class="baseContent">{{ form.forestManagementRight }}</span>
            </div>
            <div>
              <span class="baseTitle"> 统一社会信用代码：</span
              ><span class="baseContent">{{ form.forestManagementRights }}</span>
            </div>
            <div>
              <span class="baseTitle"> 起始日期：</span
              ><span class="baseContent">{{ form.startingDateManagement }}</span>
            </div>
            <div>
              <span class="baseTitle"> 终止日期：</span
              ><span class="baseContent">{{ form.terminationDateRight }}</span>
            </div>
            <div>
              <span class="baseTitle"> 经办机构：</span
              ><span class="baseContent">{{ form.forestLandContractingAuthority }}</span>
            </div>
            <div v-if="false">
              <span class="baseTitle"> 经办材料：</span
              ><span class="baseContent">{{ form.ldcbqjbcl }}</span>
            </div>
          </div>
        </div>
        <div>
          <h3 style="font-weight: bold">4、林木所有权</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 权利人：</span
              ><span class="baseContent">{{ form.lbsyqlr }}</span>
            </div>
            <div>
              <span class="baseTitle"> 身份证号码：</span
              ><span class="baseContent">{{ form.ljsyqlrsfzh }}</span>
            </div>
            <div>
              <span class="baseTitle"> 统一社会信用代码：</span
              ><span class="baseContent">{{ form.lmsyqqlrxyhdm }}</span>
            </div>
            <div>
              <span class="baseTitle"> 经办机构：</span
              ><span class="baseContent">{{ form.lbsyqjbjg }}</span>
            </div>
            <div v-if="false">
              <span class="baseTitle"> 经办材料：</span
              ><span class="baseContent">{{ form.lmsyqjbcl }}</span>
            </div>
          </div>
        </div>
        <div>
          <h3 style="font-weight: bold">5、林木使用权</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 权利人：</span
              ><span class="baseContent">{{ form.lmsyqqlr }}</span>
            </div>
            <div>
              <span class="baseTitle"> 身份证号码：</span
              ><span class="baseContent">{{ form.lmsyqqlrsfzh }}</span>
            </div>
            <div>
              <span class="baseTitle"> 统一社会信用代码：</span
              ><span class="baseContent">{{ form.lmsyqqhrxydm }}</span>
            </div>
            <div>
              <span class="baseTitle"> 经办机构：</span
              ><span class="baseContent">{{ form.lmsyqjbjg }}</span>
            </div>
            <div v-if="false">
              <span class="baseTitle"> 经办材料：</span
              ><span class="baseContent">{{ form.lmsiyqjbcl }}</span>
            </div>
          </div>
        </div>
        <div>
          <h3 style="font-weight: bold">6、其他信息</h3>
          <div class="baseInfo-content">
            <div>
              <span class="baseTitle"> 状态：</span
              ><span class="baseContent">{{ form.state }}</span>
            </div>
            <div>
              <span class="baseTitle"> 照片：</span>
              <el-image
                :src="baseUrl + form.photo"
                fit="fill"
                :preview-src-list="[baseUrl + form.photo]"
                ><template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div> </template
              ></el-image>
            </div>
            <div>
              <span class="baseTitle"> 保险产品：</span
              ><span class="baseContent">{{ form.insuranceProducts }}</span>
            </div>
            <div>
              <span class="baseTitle"> 评估金额：</span
              ><span class="baseContent">{{ form.evaluateTheAmount }}</span>
            </div>
            <div>
              <span class="baseTitle"> 抵押阈值金额：</span
              ><span class="baseContent">{{ form.mortgageThresholdAmount }}</span>
            </div>
            <div>
              <span class="baseTitle"> 林权证照： </span>
              <el-image
                :src="baseUrl + form.photo"
                fit="fill"
                :preview-src-list="[baseUrl + form.forestOwnershipCertificate]"
              >
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <!-- <span class="baseContent">{{ form.forestOwnershipCertificate }}  </span>-->
            </div>
            <div>
              <span class="baseTitle"> 发证记录次数：</span
              ><span class="baseContent">{{ form.numberOfIssuanceRecords }}</span>
            </div>
            <div>
              <span class="baseTitle"> 抵押担编号：</span
              ><span class="baseContent">{{ form.mortgageGuaranteeNumber }}</span>
            </div>
            <div>
              <span class="baseTitle"> 合同信息编号：</span
              ><span class="baseContent">{{ form.contractInformationNumber }}</span>
            </div>
            <div>
              <span class="baseTitle"> 户数：</span
              ><span class="baseContent">{{ form.households }}</span>
            </div>
            <div>
              <span class="baseTitle"> 是否争议：</span
              ><span class="baseContent">{{ form.isThereADispute }}</span>
            </div>
            <div>
              <span class="baseTitle"> 抵押担编号：</span
              ><span class="baseContent">{{ form.mortgageGuaranteeNumber }}</span>
            </div>
            <div>
              <span class="baseTitle"> 最新评估报告：</span
              ><span class="baseContent">{{ form.latestEvaluationReport }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <el-row :gutter="24" v-if="false">
          <el-col :span="12" class="mb20">
            <el-form-item label="审核人" prop="reviewer">
              <el-input v-model="form.reviewer" placeholder="请输入审核人" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="审核人编号" prop="auditorNumberAuditProcess">
              <el-input
                v-model="form.auditorNumberAuditProcess"
                placeholder="请输入审核人编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="依据文件编号" prop="accordingToTheDocumentNumber">
              <el-input
                v-model="form.accordingToTheDocumentNumber"
                placeholder="请输入依据文件编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="依据文件名称" prop="accordingToTheFileName">
              <el-input
                v-model="form.accordingToTheFileName"
                placeholder="请输入依据文件名称"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ForestOwnershipInformationDialog">
// ========== 1. 导入语句 ==========
import { useDict } from "/@/hooks/dict";
import { rule } from "/@/utils/validate";
import { useMessage } from "/@/hooks/message";
import { Picture } from "@element-plus/icons-vue";
import {
  getObj,
  addObj,
  putObj,
  validateExist,
} from "/@/api/forestry/forestOwnershipInformation";

// ========== 2. 组件定义 ==========
// 定义组件事件
const emit = defineEmits(["refresh"]);
const activeName = ref("first");
// ========== 3. 响应式数据定义 ==========
// 基础响应式变量
const dataFormRef = ref(); // 表单引用
const visible = ref(false); // 弹窗显示状态
const loading = ref(false); // 加载状态

// 表单数据对象
const form = reactive({
  id: "", // 主键
  forestLandParcelNumber: "", // 林地宗地号
  forestNumber: "", // 林权证号
  realEstateUnitNumber: "", // 不动产单元号
  locatedInTheCounty: "", // 坐落县
  sittingVillagetownstreet: "", // 坐落乡/镇/街道
  locatedVillage: "", // 坐落村
  locationGroup: "", // 坐落组
  forestHolder: "", // 林地所有权权利人
  forestHolders: "", // 林地所有权权利人统一社会信用代码
  forestAgency: "", // 林地所有权经办机构
  materialsOwnership: "", // 林地所有权经办材料
  forestSystem: "", // 林地所有权经办系统
  addressSystem: "", // 林地所有权经办系统地址
  rightMountain: "", // 林地使用权（自留山）权利人
  useRightHolderPrivateMountain: "", // 林地使用权权力人（自留山）身份证号码
  startingDate: "", // 林地使用权（自留山）起日期
  endDate: "", // 林地使用权（自留山）止日期
  forestUseAgency: "", // 林地使用权经办机构
  materialsHandlingRights: "", // 林地使用权经办材料
  forestHandlingSystem: "", // 林地使用权经办系统
  forestUseAddress: "", // 林地使用权经办查询地址
  rightRights: "", // 林地承包经营权权利人
  forestManagementRight: "", // 林地承包经营权权利人身份证号码
  forestManagementRights: "", // 林地承包经营权权利人统一社会信用代码
  startingDateManagement: "", // 林地承包经营权起始日期
  terminationDateRight: "", // 林地承包经营权终止日期
  forestLandContractingAuthority: "", // 林地承包权经办机构
  ldcbqjbcl: "", // 林地承包权经办材料
  ldcbqjbxt: "", // 林地承包权经办系统
  ljcbqjbcxdz: "", // 林地承包权经办查询地址
  lbsyqlr: "", // 林木所有权权利人
  ljsyqlrsfzh: "", // 林木所有权权利人身份证号码
  lmsyqqlrxyhdm: "", // 林木所有权权利人统一社会信用代码
  lbsyqjbjg: "", // 林木所有权经办机构
  lmsyqjbcl: "", // 林木所有权经办材料
  lmsyqjbxt: "", // 林木所有权经办系统
  lmsyqjbcxdz: "", // 林木所有权经办查询地址
  lmsyqqlr: "", // 林木使用权权利人
  lmsyqqlrsfzh: "", // 林木使用权权利人身份证号码
  lmsyqqhrxydm: "", // 林木使用权权利人统一社会信用代码
  lmsyqjbjg: "", // 林木使用权经办机构
  lmsiyqjbcl: "", // 林木使用权经办材料
  lmsiyqjbxt: "", // 林木使用权经办系统
  lmsiyqcxdz: "", // 林木使用权查询地址
  reviewer: "", // 审核人
  auditorNumberAuditProcess: "", // 审核人编号
  accordingToTheDocumentNumber: "", // 依据文件编号
  accordingToTheFileName: "", // 依据文件名称
  state: "", // 状态
  photo: "", // 照片
  insuranceProducts: "", // 保险产品
  latestEvaluationReport: "", // 最新评估报告
  evaluateTheAmount: "", // 评估金额
  mortgageThresholdAmount: "", // 抵押阈值金额
  forestOwnershipCertificate: "", // 林权证照
  numberOfIssuanceRecords: "", // 发证记录次数
  mortgageGuaranteeNumber: "", // 抵押担编号
  contractInformationNumber: "", // 合同信息编号
  households: "", // 户数
  isThereADispute: "", // 是否争议
});

// ========== 4. 字典数据处理 ==========
const {
  forest_category,
  record_state,
  transfer_way,
  transfer_type,
  trees_varieties,
  payment_way,
  ecological_obligation_inheritance,
  dispute_tackle_way,
  transfer_limitation,
} = useDict(
  "forest_category",
  "record_state",
  "transfer_way",
  "transfer_type",
  "trees_varieties",
  "payment_way",
  "ecological_obligation_inheritance",
  "dispute_tackle_way",
  "transfer_limitation"
);
// ========== 5. 表单校验规则 ==========
const dataRules = ref({
  forestLandParcelNumber: [
    { required: true, message: "林地宗地号不能为空", trigger: "blur" },
  ],
  forestNumber: [{ required: true, message: "林权证号不能为空", trigger: "blur" }],
  forestHolder: [
    { required: true, message: "林地所有权权利人不能为空", trigger: "blur" },
  ],
  rightMountain: [
    { required: true, message: "林地使用权（自留山）权利人不能为空", trigger: "blur" },
  ],
  rightRights: [
    { required: true, message: "林地承包经营权权利人不能为空", trigger: "blur" },
  ],
  lbsyqlr: [{ required: true, message: "林木所有权权利人不能为空", trigger: "blur" }],
  lmsyqqlr: [{ required: true, message: "林木使用权权利人不能为空", trigger: "blur" }],
});

// ========== 6. 方法定义 ==========
// 获取详情数据
const getForestOwnershipInformationData = async (id: string) => {
  try {
    loading.value = true;
    const { data } = await getObj({ id: id });
    // 直接将第一条数据赋值给表单
    Object.assign(form, data[0]);
  } catch (error) {
    useMessage().error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 打开弹窗方法
const openDialog = (id: string) => {
  visible.value = true;
  form.id = "";

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取ForestOwnershipInformation信息
  if (id) {
    form.id = id;
    getForestOwnershipInformationData(id);
  }
};

// 提交表单方法
const onSubmit = async () => {
  loading.value = true; // 防止重复提交

  // 表单校验
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) {
    loading.value = false;
    useMessage().error("还有信息未填写完毕");
    return false;
  }

  try {
    // 根据是否有ID判断是新增还是修改
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? "修改成功" : "添加成功");
    visible.value = false;
    emit("refresh"); // 通知父组件刷新列表
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// ========== 7. 对外暴露 ==========
// 暴露方法给父组件
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss">
.baseInfo {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  > div {
    width: 30%;
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
}
.baseTitle {
  color: black;
  font-weight: bold;
}
h3 {
  color: blue;
}
.baseInfo1 {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 33.3%;
    line-height: 30px;
    border-bottom: 1px solid #f3f0f0;
  }
  .baseTitle {
    margin-left: 10px;
  }
  .baseContent {
    .li {
      text-indent: 2em;
    }
  }
}
::v-deep .el-divider--horizontal {
  // margin:10px 0;
}
</style>
